<template>
  <el-dialog v-if="dialogFormVisible" width="30%" title="编辑角色" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="params" :rules="rules" label-width="6rem">
      <el-row>
        <!-- <el-col :span="12">
          <el-form-item :disabled="userDisabled" prop="code" label="角色编码：">
            <el-input v-model="params.code" />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item prop="name" label="角色名称：">
            <el-input v-model="params.name" :disabled="disabledEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="顺序号：" class="flex-just">
            <el-input-number v-model="params.sort" :disabled="disabledEdit" :max="100" :min="1" :precision="0" :controls="true" controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色描述：">
            <el-input v-model="params.remark" :disabled="disabledEdit" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!disabledEdit" slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleRole">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addRole, modifyRole, getRoleById } from '@/api/role'
export default {
  props: {
    parentId: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userDisabled: false,
      disabledEdit: false,
      dialogFormVisible: false,
      params: {},
      rules: {
        name: [{
          required: true,
          message: '请填写角色名称',
          trigger: 'blur'
        }]
        // code: [{
        //   required: true,
        //   message: '请填写角色编码',
        //   trigger: 'blur'
        // }],
        // sort: [{
        //   required: true,
        //   message: '请填写排序',
        //   trigger: 'blur'
        // }]
      }
    }
  },
  methods: {
    init(bool) {
      this.disabledEdit = bool
      if (this.parentId) {
        getRoleById(this.parentId).then(response => {
          this.params = response
          this.dialogFormVisible = true
        })
      } else {
        this.params = {}
        this.dialogFormVisible = true
      }
    },
    handleRole() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.parentId) {
            modifyRole(this.params).then(response => {
              this.$message.success('修改成功')
              this.$emit('refresh')
              this.dialogFormVisible = false
            })
          } else {
            addRole(this.params).then(response => {
              this.$message.success('添加成功')
              this.$emit('refresh')
              this.dialogFormVisible = false
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
